<template>
  <div class="app-container">
    <el-form :rules="rules" ref="form" :model="form" label-width="80px">
      <el-form-item label="使能">
        <el-switch v-model="form.hostenable"></el-switch>
      </el-form-item>
      <el-form-item label="IP" prop="hostip">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.hostip"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="TCP端口" prop="hostport">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.hostport"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="UDP端口" prop="udpport">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.udpport"></el-input>
        </el-col>
      </el-form-item>
      <hr>
      <el-alert
        class="topTxt"
        title="第三方平台服务器"
        :closable="false"
        type="info">
      </el-alert>
      <!-- <el-form-item label="第三方平台服务器"> -->
      </el-form-item>
      <el-form-item label="使能">
        <el-switch v-model="form.hik_server_enable"></el-switch>
      </el-form-item>
      <el-form-item label="SSL使能">
        <el-switch v-model="form.hik_server_ssl"></el-switch>
      </el-form-item>
      <el-form-item label="IP" prop="hik_server_host_ip">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.hik_server_host_ip"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="端口" prop="hik_server_host_port">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.hik_server_host_port"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="通道号" prop="channel">
        <el-col :xs="12" :sm="6" :md="6" :lg="4"  :xl="3">
          <el-input v-model="form.channel"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sethostinfo">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "platformServer",
      data:function () {
        var regExp=this.BASE.validateItem
        var ipcheck = (rule, value, callback) => {
          if(value===""){
            callback(new Error('请输入IP'));
          }
          else if (!regExp.ip.test(value)) {
            callback(new Error('IP格式不正确'));
          }else {
            callback();
          }
        }
        var portcheck = (rule, value, callback) => {
          if(value===""){
            callback(new Error('请输入端口号'));
          }else if (!regExp.port.test(value)) {
            callback(new Error('端口号只能输入0 ~ 65535之间的数字'));
          }else {
            callback();
          }
        }
        return{
          rules: {
            hostip: [
              { validator: ipcheck, required: true, trigger: 'blur' }
            ],
            hostport: [
              { validator: portcheck, required: true, trigger: 'blur' }
            ],
            udpport: [
              { validator: portcheck, required: true, trigger: 'change' }
            ],
            hik_server_host_ip: [
              { validator: ipcheck, required: true, trigger: 'blur' }
            ],
            hik_server_host_port: [
              { validator: portcheck, required: true, trigger: 'blur' }
            ],
            channel: [
              { required: true, message: '请输入通道号', trigger: 'change' },
              { max: 24, message: '最多 24 个字符', trigger: 'blur' }
            ],
          },
          form: {
            hostip: '',
            hostport: '',
            hostenable: false,
            udpport:'',
            hik_server_enable: false,
            hik_server_ssl: false,
            hik_server_host_ip: '',
            hik_server_host_port: '',
            channel: '',
          }
        }
      },methods:{
        gethostinfo:function(){
          var _this=this
          _this.postAjax({
            method:'gethostinfo',
            params:{}
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              var data=res.params
              // debugger
              _this.form.hostip=data.hostip
              _this.form.hostport=data.hostport
              _this.form.udpport=data.udpport
              _this.form.hostenable=data.enable==1?true:false
              
              _this.form.hik_server_enable=data.hik_server_enable==1?true:false
              _this.form.hik_server_ssl=data.hik_server_ssl==1?true:false
              _this.form.hik_server_host_ip=data.hik_server_host_ip
              _this.form.hik_server_host_port=data.hik_server_host_port
              _this.form.channel=data.channel
            }else{
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
            _this.tips(res.errorInfo.detail,'error')
          }).finally(function (fn) {
            console.log(fn);
          })
        },
        sethostinfo:function () {
          var _this=this
          this.$refs['form'].validate((valid) => {
            if (valid) {
              _this.loading=true
              _this.postAjax({
                method:'sethostinfo',
                params:{
                  hostip:_this.form.hostip,
                  hostport:_this.form.hostport*1,
                  udpport:_this.form.udpport*1,
                  hostenable:_this.form.hostenable?1:0,

                  hik_server_enable:_this.form.hik_server_enable?1:0,
                  hik_server_ssl:_this.form.hik_server_ssl?1:0,
                  hik_server_host_ip:_this.form.hik_server_host_ip,
                  hik_server_host_port:_this.form.hik_server_host_port*1,
                  channel:_this.form.channel,
                }
              }).then(function (res) {
                console.log(res);
                if(res.result==0){
                  _this.tips('保存成功','success')
                }else {
                  _this.tips(res.errorInfo.detail,'error')
                }
              }).catch(function (err) {
                console.log(err);
              }).finally(function (fn) {
                _this.loading=false
                console.log(fn);
              })
            } else {
              return false;
            }
          })
        }
      },mounted:function () {
        this.gethostinfo()
      }
    }
</script>

<style scoped>
  .topTxt {
    background: none;
    color: #000;
    font-weight: bold;
  }
  .el-alert__content .el-icon-close {
    display: none;
  }
</style>
